<template>
    <view>
        <van-search v-model="search" shape="round" placeholder="城市/行政区" @search="searchChange" />
        <view class="city-gps" @click="toGps">
            <image class="adimg" src="https://daiyue.gzzhenyi.net/static/index/address.png" mode="widthFix"></image>
            当前定位城市 <span class="city-name"> {{ user.location }}</span>
        </view>
        <view class="city-list">
            <view class="city-list-title">热门城市</view>
            <view class="city-list-content">
                <view class="city-list-item" v-for="item in cityList" :key="item">{{ item }}</view>
            </view>
        </view>

        <fei-city-select-widget @onClick="selectCity" :search="search"> </fei-city-select-widget>

    </view>

</template>

<script>
import FeiCitySelectWidget from "./FeiCitySelectWidget/FeiCitySelectWidget"
import { mapState, mapMutations } from "vuex";
export default {
    components: {
        FeiCitySelectWidget
    },
    data() {
        return {
            search: '',
            cityList: ['广州',
                '北京',
                '南京',
                '深圳',
                '上海',
                '成都',
                '武汉',
                '苏州'
            ]
        }
    },
	computed: {
		...mapState(["user"])
	},
    onLoad(options) {

    },
    methods: {
		...mapMutations('user', ["changeLocation"]),
        toGps() {
            uni.getLocation({
                type: 'wgs84',
                success: function (res) {
                    console.log('当前位置的经度：' + res.longitude);
                    console.log('当前位置的纬度：' + res.latitude);
                }
            });
        },
        selectCity(e) {
            console.log(e)
			this.changeLocation(e.name)
			uni.navigateBack()
        },
        searchChange(e) {
            console.log(e)
            this.search = e.detail
        }
    },
}
</script>

<style lang="less">
// page {
//     background-color: #fff;
// }

::v-deep.city-select_initial {
    color: #3D3D3D;
    font-size: 26upx;
    font-weight: normal;

}

::v-deep.city-select_initial {
    border-bottom: 1px solid #E9E9E9;
    background-color: transparent !important;
}

::v-deep.city-select__cell {
    border-bottom: 1px solid #E9E9E9;
    font-size: 24upx;
    color: #3D3D3D;
    line-height: 75upx;
    height: 75upx;
}

::v-deep.city-select__sidebar {
    font-size: 26upx;
    color: #3D3D3D;
}

.city-gps {
    background-color: #fff;
    padding: 10upx 30upx 30upx 30upx;
    font-size: 28upx;
    color: #3D3D3D;
    display: flex;
    align-items: center;
}

.city-name {
    color: #FF6200;
    margin-left: 20upx;
}

.adimg {
    width: 25upx;
    margin-right: 10upx;
}

.city-list-title {
    font-size: 28upx;
    color: #3D3D3D;
    padding: 20upx 30upx;
}

.city-list-content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20upx;
    padding: 20upx;

}

.city-list-item {
    background-color: #F3F3F3;
    border-radius: 8px;
    padding: 8upx 42upx;
    color: #3D3D3D;
    font-size: 24upx;
    text-align: center;
}
</style>